<template>
    <div>
        <el-form ref="form" :model="sizeForm" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="sizeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属品牌">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="销售区域">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标签">
                <el-tag
                        v-for="tag in tags"
                        :key="tag.name"
                        closable
                        :type="tag.type">
                    {{tag.name}}
                </el-tag>
            </el-form-item>
            <el-form-item label="关键字">
                <el-tag
                        v-for="tag in tags"
                        :key="tag.name"
                        closable
                        :type="tag.type">
                    {{tag.name}}
                </el-tag>
            </el-form-item>
            <el-form-item label="销售时间">
                <el-date-picker
                        v-model="value5"
                        type="datetimerange"
                        :picker-options="pickerOptions2"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="服务项">
                <el-checkbox-group v-model="sizeForm.type">
                    <el-checkbox-button label="芝麻信用免押金" name="type"></el-checkbox-button>
                    <el-checkbox-button label="正品保证" name="type"></el-checkbox-button>
                    <el-checkbox-button label="上门维修" name="type"></el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="物流方式">
                <el-radio-group v-model="sizeForm.resource">
                    <el-radio border label="自营物流"></el-radio>
                    <el-radio border label="第三方物流"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否包邮">
                <el-switch
                        v-model="sizeForm.isFreeLogistic"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toNext">下一步,添加图片以及介绍</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    export default {
        name: "product-add-step1",
        data() {
            return {
                sizeForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    isFreeLogistic: true
                },
                tags: [
                    {name: '标签一', type: ''},
                    {name: '标签二', type: 'success'},
                    {name: '标签三', type: 'info'},
                    {name: '标签四', type: 'warning'},
                    {name: '标签五', type: 'danger'}
                ],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value5: ''
            }
        },
        methods: {
            toNext() {
                this.$emit('next')
            }
        }
    }
</script>

<style scoped>

</style>
